<%@page import="org.jeecgframework.web.util.StaticValue"%>
<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<%@include file="/context/mytags.jsp"%>
<head>
<script type="text/javascript" src="plug-in/jquery/jquery-1.8.3.js"></script>
<script type="text/javascript" src="plug-in/tools/curdtools_zh-cn.js"></script>
<script type="text/javascript" src="plug-in/Highcharts-4.2.4/highcharts.js" ></script>
<script type="text/javascript" src="plug-in/easyui/jquery.easyui.min.1.3.2.js"></script>
<script type="text/javascript" src="plug-in/lhgDialog/lhgdialog.min.js"></script>
<link rel="stylesheet" href="plug-in/easyui/themes/default/easyui.css" type="text/css"></link>
<link rel="stylesheet" href="plug-in/easyui/themes/icon.css" type="text/css"></link>
<link rel="stylesheet" href="plug-in/tools/css/common.css" type="text/css"></link>
<style type="text/css">
.tabs-header{background: white;}
</style>
<script>
$(function(){
	var flag = false;
	$("#tabs").tabs({
		border:false,
		onSelect:function(title){
			if(title == '周报' && !flag){//只加载一次
				initallHighCharts_Week("week");
				flag = true;
			}
		}
	});
	initallHighCharts_month("month");
	
});
function initallHighCharts_month(type){
	/*-----------------折线图 月报------------------*/
	var data = getCharData(type);
		$("#highChartContainer_1").highcharts({
		credits: {//去水印
         	text: '',
         	href: ''
     	},
        chart: {
            type: 'column'
        },
        title: {
            text: '巡检进度跟进'
        },
        subtitle: {
            text: '完成比例'
        },
        xAxis: {
            categories: ['Jan','Feb','Mar','Apr','May','Jun','Jul','Aug','Sep','Oct','Nov','Dec']
        },
        yAxis: {
            title: {
                text: ''
            },
            stackLabels: {
                enabled: true,
                style: {
                	fontWeight : 'normal',
                    color: (Highcharts.theme && Highcharts.theme.textColor) || 'gray'
                }
            },
            plotLines: [{
                value: 0,
                width: 1,
                color: '#808080'
            }],
            min: 0,
            tickInterval:1 // 刻度值  
        },
        legend:{enabled:true},
        tooltip: {
			pointFormat: '<span style="color:{series.color}">{series.name}</span>: <b>{point.y}</b> <br/>',
<%--			pointFormat: '<span style="color:{series.color}">{series.name}</span>: <b>{point.y}</b> ({point.percentage:.0f}%)<br/>',--%>
            shared:true
        },
        plotOptions: {
            column: {
                borderWidth: 0,
                stacking: 'normal',
        		pointWidth: 22
            }
        },
        series : data.highChartsDuiDieData
    });
	$("#highchartContainer_month").highcharts({
		credits: {//去水印
         	text: '',
         	href: ''
     	},
     	title: {
            text: '巡检统计月报',
            x: -20 //center
        },
        xAxis: {
            categories: ['1', '2', '3', '4', '5', '6','7', '8', '9', '10', '11', '12']
        },
        yAxis: {
            title: {
                text: ''
            },
            plotLines: [{
                value: 0,
                width: 1,
                color: '#808080'
            }],
            min: 0,
            tickInterval:1 // 刻度值  
        },
        series : data.highCharts
    });
	/*-----------------end 折线图 月报------------------*/
	drawTable(type,data.highCharts);
}
function initallHighCharts_Week(type){
	/*-----------------折线图 周报-------------------*/
	var data = getCharData(type);
	$("#highchartContainer_week").highcharts({
		credits: {//去水印
         	text: '',
         	href: ''
     	},
     	title: {
            text: '巡检统计周报',
            x: -20 //center
        },
        xAxis: {
            categories: ['1', '2', '3', '4', '5', '6','7', '8', '9', 
                         '10', '11', '12' ,'13', '14', '15', '16','17', '18', '19',
                         '20', '21', '22', '23', '24', '25', '26','27', '28', '29',
                         '30', '31', '32', '33', '34', '35', '36','37', '38', '39', 
                         '40', '41', '42', '43', '44', '45', '46','47', '48', '49', 
                         '50', '51', '52' ]
        },
        yAxis: {
            title: {
                text: ''
            },
            plotLines: [{
                value: 0,
                width: 1,
                color: '#808080'
            }],
            min: 0,
            tickInterval:1 // 刻度值  
        },
        series : data.highCharts
    });
	/*-----------------end 折线图 周报------------------*/
	drawTable(type,data.highCharts);
}
function getCharData(type){
	var data = {};
	$.ajax({
		url : "zyInspectionReportController.do?queryIpRealTimeReportData",
		data : {
			"company" : $("#company_"+type).val(),
			"year" : $("#year_"+type).val(),
			"type" : type,
			"egIds" : $("#egId_"+type).val()
		},
		async : false,
		dataType : 'json',
		success : function(result) {
			data.highCharts = result.highCharts;
			data.highChartsDuiDieData = result.highChartsDuiDie;
		}
	});
	return data;
}
function drawTable(type,data){
	$("#table_"+type).html("");
	var th_01 = type == 'week' ? '周' : '月';
	var html = "<tr>";
		html += "<th>" + th_01 + "</th>";
	var len = type == 'week' ? 52 : 12;
	for(var i = 0; i < len;i++ ){
		html += "<th>" + (i+1) + "</th>";
	}
	html += "</tr>";
	$(data).each(function(i,item_i){
		html += "<tr><td style='min-width:75px;'>" + item_i.name + "</td>";
		$(item_i.data).each(function(j,item_j){
			html += "<td>" + item_j + "</td>";
		});
		html += "</tr>";
	});
	$("#table_"+type).append(html);
}
function setHighChartData(type){
	var data = getCharData(type);
	var chart = $('#highchartContainer_'+type).highcharts();
	$(data.highCharts).each(function(i,item){
		chart.series[i].setData(data.highCharts[i].data);
	});
	drawTable(type, data.highCharts);
	
	var chart1 = $('#highChartContainer_1').highcharts();
	$(data.highChartsDuiDieData).each(function(i,item){
		chart1.series[i].setData(item.data);
	});
}
function searchReport(type){
	setHighChartData(type);
}
function exportReport(type){
	var tableData = [];
	$("#table_"+type+" tr").each(function(r,item_r){
		var rowData = [];
		var cell = "";
		if(r == 0){
			cell = "th";
		}else{
			cell = "td";
		}
		$(item_r).find(cell).each(function(c,item_c){
			rowData.push($(item_c).html());
		});
		tableData.push(rowData);
	});
	var url = "zyInspectionReportController.do?exportIrReport";
	myDownload(url,"tableData="+tableData.join(";")+"&fileName='巡检实时报表.xlsx'");
}
</script>
</head>
<body style="padding: 0px;margin: 0px auto;">
<c:if test="${not empty tpRoleUser && tpRoleUser}" >
	<input id="departId" type="hidden" value="${userDpId}" >
</c:if>
<div class="easyui-tabs" id="tabs" >
	<div title="月报" style="">
		<div class="report_title">巡检实时报表-月报</div>
		<table width="99%">
			<tr>
				<c:if test="${not empty tpRoleUser && tpRoleUser}" >
					<td>
						<label class="report_label">工程师</label>
						<input id="egId_month" type="hidden" >
						<input id="egName_month" readonly="readonly" style="width: 250px;" />
						<t:choose hiddenName="egId_month" hiddenid="id" inputTextname="egName_month" textname="name" paramIds="departId"
							title="工程师列表" url="zyEngineerController.do?goChooseEgsForIrReport" name="engineerList" width="660px" height="550px"
							icon="icon-search"  isclear="true" />
						<input id="company_month" type="hidden" value="${userDpCode}" >
					</td>
				</c:if>
				<c:if test="${empty tpRoleUser}">
					<td>
						<label class="report_label">巡检单位</label>
						<t:dictSelect field="company_month" id="company_month" typeGroupCode="<%=StaticValue.DIC_INSPECTION_COMPANY %>" ></t:dictSelect>
					</td>
				</c:if>
				<td>
					<label class="report_label">巡检年度</label>
					<select id="year_month">
						<c:forEach items="${years }" var="item">
							<option value="${item }">${item }&nbsp;年</option>
						</c:forEach>
					</select>
				</td>
				<td>
					<a href="javascript:void(0);" class="easyui-linkbutton" data-options="iconCls:'icon-search'" onclick="searchReport('month')">显示报表</a>
				</td>
			</tr>
		</table>
		<div style="text-align:right; padding-right:10px;font-size:12px;">
			<a href="javascript:void(0);" class="easyui-linkbutton" data-options="iconCls:'icon-putout',plain:'true'" onclick="exportReport('month')">导出报告</a>
		</div>
		<table id="table_month" class="report_table"></table>
		<div style="overflow:scroll;width:99%; height:700px;">
		<div id="highChartContainer_1" style="width: 98%;display: inline-block;"></div>
		<div id="highchartContainer_month" style="height:400px;"></div>
		</div>
	</div>
	<div title="周报" style="">
		<div class="report_title">巡检实时报表-周报</div>
		<table width="100%">
			<tr>
				<c:if test="${not empty tpRoleUser && tpRoleUser}" >
					<td>
						<label class="report_label">工程师</label>
						<input id="egId_week" type="hidden" >
						<input id="egName_week" readonly="readonly" style="width: 250px;" />
						<t:choose hiddenName="egId_week" hiddenid="id" inputTextname="egName_week" textname="name" paramIds="departId"
							title="工程师列表" url="zyEngineerController.do?goChooseEgsForIrReport" name="engineerList" width="660px" height="550px"
							icon="icon-search"  isclear="true" />
						<input id="company_week" type="hidden" value="${userDpCode}" >
					</td>
				</c:if>
				<c:if test="${empty tpRoleUser}">
					<td>
						<label class="report_label">巡检单位</label>
						<t:dictSelect field="company_week" id="company_week" typeGroupCode="<%=StaticValue.DIC_INSPECTION_COMPANY %>" ></t:dictSelect>
					</td>
				</c:if>
				<td>
					<label class="report_label">巡检年度</label>
					<select id="year_week">
						<c:forEach items="${years }" var="item">
							<option value="${item }">${item }&nbsp;年</option>
						</c:forEach>
					</select>
				</td>
				<td>
					<a href="javascript:void(0);" class="easyui-linkbutton" data-options="iconCls:'icon-search'" onclick="searchReport('week')">显示报表</a>
				</td>
			</tr>
		</table>
		<div style="text-align:right; padding-right:10px;font-size:12px;">
			<a href="javascript:void(0);" class="easyui-linkbutton" data-options="iconCls:'icon-putout',plain:'true'" onclick="exportReport('week')">导出报告</a>
		</div>
		<table id="table_week" class="report_table"></table>
		<div id="highchartContainer_week" style="height:400px;"></div>
	</div>
</div>
</body>
